Der Web Developer Spickzettel

HTML 5

<!DOCTYPE html>

<head> (link, meta, title)

Der meta Tag:

Anker:

<a href="Adresse" target=“_blank“>Link Text</a> Anker extern / Web, blank öffnet in neuem Tab

<a href="#ankerpunkt">Link Text</a> Anker auf eigener Seite

Listen:

Forms:

<button type="submit">Button

<kbd></kbd> text als keyboard input definieren

<input type=“radio“>text (text oder <label for =“id“>id</label>)

mögliche Attribute: type, name, value, disabled, readonly, size, maxlength, min/max, autocomplete, (on/off), autofocus(on/off), placeholder=“text“,

type kann sein: radio / checkbox / color / week / date / month / time / button / email / range / search / url /file / multiple(on/off), required(on/off)

Videos:

</video>

Audio:

</audio>

Untertitel:

Mehrere Zeilen für mehrere Sprachen anlegen.

SVG-Grafiken

</svg>

Zeichnet einen Kreis, Rand rot, Innen blau

gleiches mit „rect“ zeichnet Rechteck

CSS

CSS Datei einbinden in HTML-head über link-Tag:

CSS Schreibweise:

SELEKTOR {property: value; property: value;}

!important größer inline größer ID = # größer Klasse = . größer Tag (in CSS gilt sonst das top-bottom Prinzip)

CSS Selektoren-Schreibweise:

e1.e2 {...}	alle elemente e1 mit klasse e2	/* Kommentare */ auch mehrzeilig
e1, e2 {...}	alle elemente e1 und alle elemente e2
e1 e2 {...}	alle elemente e2 innerhalb des ersten elements e1
e1 > e2 {...}	alle elemente e2 mit eltern element e1	Farbschreibweisen: rgba(255, 99, 75, 0.5) oder hsla(9, 100%, 64%, 0.5) oder #ff6347 evtl. mit Angabe einer opacity: 0.5;
e1 + e2 {...}	das erste element e2 das sofort nach e1 element kommt
e1 ~ e2 {...}	jedes e2 welchem ein e1 vorausgeht

Das body Element ist Element der untersten Ebene, aber :root verwendbar für globale CSS Variablen, auch für fallbacks

Hintergrund einstellen (bspw. body):

background-color: farbe;

background-image: url(„dateiname/pfad,jpg“);

background-repeat: no-repeat/repeat-x/repeat-y;

background-position: center right; (und andere!)

Kurzschreibweise background: alle 4 Hauptattribute hintereinander festgelegter Reihenfolge: color image repeat position

background: farbe url(„img.jpg“) no-repeat right top;

background-attachement: fixed/scroll;

Box-Modell:

Das Box-Modell definiert die Position von html Elementen als Rechtecke mit den properties margin (-top, -right, -bottom, -left) (Außenabstand), outline (-style, -color, -width, offset), border (-color, -width, -style, -radius) (Rand) und padding (-top, -right, -bottom, -left) (Innenabstand), dann content. In dieser Reihenfolge von außen.

Kurzschreibweise outline und border: outline/border: width style color;

Es gibt block-Elemente und inline-Elemente.
Blockelemente fangen immer eine neue Zeile an und verwenden den gesamten verfügbaren Platz links und rechts.	Inlineelemente fangen keine neue Zeile an und nehmen nur soviel Platz wie benötigt
Blockelemente sind: div, h1-h6, p,form, header, footer, section,	Inlineelemente sind: span, a, img
Diese Standard – Attribute lassen sich durch display: block; bzw. display: inline; verändern

Die dritte Möglichkeit ist ein Element mit display: hidden; zu definieren. Dies zeigt die Seite an, als wäre das Element nicht da. Durch Änderung des Attributs auf display:block; bzw. display: inline; ändert sich das und das Element wird entsprechend angezeigt. Ähnlich ist visibility: hidden;. Doch hier wird die Seite normal angezeigt, das Element mit visibility: hidden; aber versteckt. Der Platz, den das Element aber brauchen würde wird reserviert, beeinflusst also das Layout!

Elementpositionierung:

position:	static; relative; fixed; absolute; sticky;	static ist default; relative verschiebt Element mit top/left/bottom/right um px; fixed hat feste Position im Fenster; absolute orientiert sich am Eltern-Element (bei body scrollt es ggf. weg) sticky ist wie fixed, nur in einer Richtung (Scrollrichtung ) bleibt es sichtbar
display:	none; inline; block; inline-block;	verbirgt element komplett oder fügt es auf bestimmte Weise ein;
float:	left; right; none;	lässt Element von Inhalt umfließen
overflow:	auto;	passt element an höchsten Inhalt an
clear:	both; left; right; none;	verschiebt Inhalt an Stelle im Element, an der kein anderes Element mehr ist in angegebener Richtung
Bei Überlagerungen kann mit z-index:-1; bestimmt werden, welches Element im Vorder- bzw. Hintergrund ist. Der höhere Index ist weiter vorne.

Text-Formattierung:

color:	Farbangabe rgba / # / hsla	text-indent:	50px; Einzug erste Zeile
text-align:	canter; left; right; justify;	letter-spacing:	3px; auch negative Zahlen möglich
text-decoration:	none; line-through; overline; underline;	line-height:	0.8; Zeilenhöhe
text-transform:	uppercase; lowercase; capitalize;	word-spacing:	-5px; Wortabstand
white-space:	nowrap; kein Umbruch	text-shadow:(2px 2px 5px red;)	x-Versatz y-Versatz blur farbe
direction:	rtl; ltl;	unicode-bidi:	bidi-override;
font-family: „Lucida Console“, Verdana, sans-serif;		(erste preferiert, dann fallback, dann fallback-klasse, bei mehr Wörtern in Anführungszeichen) = font degrade
font-style:	normal; italic; oblique;	font-size:	10px; 0.5em; 10vw; (vw=viewport width in %)
text-shadow:		box-shadow:

CSS Icons: Font Awesome, Bootstrap, Google

Links:

a:link {...}

a:visited {…}

a:hover {…}

a:active {…}

text-decoration: none; um Veränderung des link-Aussehens zu unterbinden

Cursor verändern:

cursor: auto; crosshair; pointer; text; wait; move; default; help; n/ne/nw/s/se/sw/w-resize;

Verändert den Maus-Zeiger

Listen verändern:

list-style-type: none; circle; square; upper-roman; lower-roman; upper-alpha; lower-alpha;	Verändert Aufzählungszeichen
list-style-position: outside; inside;	Verändert Position der Aufzählungszeichen
list-style: square inside url(„beispiel.gif“);	Kurzschreibweise

Tabellen:

table, th, td {…} table = ganze Tabelle th = table head (oberste Reihe) td = einzelne Felder tr= table rows	width: 100%; (Breite auf Elementbreite)	border-bottom: 1px solid #ddd; (Bsp. Styling der Tabelle)
	height: 50px; (Höhe der Tabelle)	tr:nth-child(even/odd) {background-color: #f2f2f2;}
	border: 1px solid black; (Randdefinitionen Stärke, Art, Farbe)	tr:hover {background-color: #f2f2f2;}
	border-collapse: collapse; (kein Innenraster)	<div style="overflow-x:auto;"> <table> ...table elements... </table> </div>	für responsive Tabelle, Container außen herum generieren, der overflow definiert hat
	text-align: center;
	vertical-align: bottom;

overflow: visible/hidden/scroll/auto; Regelt wie Inhalt behandelt wird der zu groß ist für sein Element. Es gibt overflow-x und overflow-y für horizontale bzw. vertikale Unterscheidung.

float: left/right; Ein Element links bzw. rechts am Rand des Elternelements positionieren. Andere Elemente können es umfließen.

clear: left/right/both/none/inherit; Mit clear kann man Elemente, die floaten an der entsprechenden Seite verhindern.

Pseudo-Klassen (:) und Pseudo Elemente (::)

p:first-child {color:blue;} Wählt alle p aus, mit Eigenschaft „first-child“ und setzt deren Textfarbe auf blau. (Pseudo-Klasse) auch :hover :visited :link :active :enabled und andere

p::first-letter {color: #ff0000;} Wählt den ersten Buchstaben in einem p Element und verändert die Farbe. (Pseudo-Element) auch: ::after ::before ::first-line ::selection Übersicht

Wie man eine Navigation styled: W3schools CSS Navbar Demo (danach weitere Demos: Dropdowns, Image Gallery,

Attribut-Selektor: a[attribut=“value“] { background-color: green; } Links mit dem Attribut in eckiger Klammer und dem Wert value bekommen grünen Hintergrund. Genaue Erklärung

= muss exakte value Angabe sein

~= ein ganzes Wort als Teil

|= ein ganzes Wort am Anfang

^= Anfang, aber kein ganzes Wort

$= endet mit

*= alles mit der angegebenen value iwo als Teil

input[type=text]:focus { background-color: lightblue; } wählt alle Input Textfelder und färbt den Hintergrund hellblau wenn darauf geklickt wird.

eigene Schriftarten verwenden: Herunterladen und im Ordner der Seite speichern, dann:
@font-face { font-family: ubuntu; src: url(Ubuntu-R.ttf); }, dann im entspr. Element aufrufen mit font-family: ubuntu;

Bilder mit Effekten belegen (Hintergrund):

-webkit-filter: blur(100px); auch: brightness, grayscale, opacity, sepia, contrast, drop-shadow(50px(x-Versatz) 10px(y-Versatz) 10px(blur) #BBB(Farbe));

2D-Transformationen

transform: scale(2, 1.5); (skalieren) translate(10px, 200px); (verschieben) rotate(42deg); (drehen) skew(10deg, 5deg); (scheren)

3D-Transformationen

transform: rotateZ(90deg); zusätzlich zu den 2D-Transformationen eine weitere Achse angeben

Responsive media design (media query)

@media screen and (max-width: 500px) es folgt separates CSS für angegebene Geräteigenschaften. Üblich ist zuerst für kleine Geräre CSS zu schreiben, dann mit media querys für größere Screens CSS zu definieren.

CSS Variablen mit "property: var(--varname, fallback);"

Java Script Basis

JS in HTML Code am Ende des body tags schreiben mit:

JS-Funktionen in Datei auslagern:

Datei erstellen, bspw. „scripts.js“ Im head-Bereich der html Datei verlinken mit:

// Einzeilen-Kommentar /*... */ mehrzeiliges Kommentar

Variablendefinitionen und Rechnen mit Variablen:

var einName = 5; einfache Variablendefinition, case-sensitive

uninitialisierte Variablen haben Wert: undefined

var einName = „String“;

Maskieren mit backslash um das jew. folgende Zeichen auszusparen aus Anführungszeichen, also \‘ ,\“, \\

Außerdem ist \n neue Zeile, \t win tab, außerdem: \b, \f, \r

Man kann innerhalb eines Strings mit \ eine neue Zeile beginnen!

Man kann aber keine Code-Zeile mit \ unterbrechen!

var a=4; var b=3; Bei a=a+b; ist a gleich 7 (alle Grundrechenarten (Standardoperatoren) möglich)

string Adition: var a=“hal“; und a += „lo“; dann ist a gleich hallo

5 % 2 = 1; Der Modolo % meint den Rest der nicht geteilt werden kann, nicht die Nach-Kommastellen!

Länge einer Variablen a mit a.length

String in array umwandeln mit .split( );

zero based indexing beachten: Zählen startet mit 0!

Wenn a = „servus“; dann ist a[1]; ist e, nicht s!

also ist der letzte Buchstabe einer Variablen immer ihre Länge – 1 also:

var lastLetter = Variable[Variable.length – 1];

i++; ist gleich wie i = i + 1;

j =++i; i wird zuerst um eins erhöht, dann j zugewiesen

j = i++; i wird j zugewiesen und danach um 1 erhöht!

var x=10;

x += 5;

x ist 15

auch -= *= oder /= (a+b)*3 Klammer vor Punkt vor Strich

Variablen, die mit var innerhalb einer Funktion definiert werden sind lokale Variablen und nur innerhalb dieser Funktion gültig!

Ausgaben in JS: mit document.write(„Hallo“); oder in einem alert mit: window.alert(„Alarm“); oder inneres HTML eines Elements ersetzen mit .innerhtml=“Hallo“;

Bsp:

var car = „Fiat“;

document.getElementById(„demo“).innerHTML = car;

bestimmt eine Variable car als string „Fiat“. Ausgabe im Element demo (bspw. p) ist „Fiat“.

Ein Objekt generieren:

var car = {type:“Fiat“, model:“500“, color:“white“}

document.getElementById(„demo“).innerHTML = „The car type is “ + car.type; oder car[„type“];

Ausgabe in demo ist: The car type is Fiat

booleans sind Wahrheitswerte (für Verzweigungen bspw.)

var b = true; oder false; Prüfungen in variablen speichern: var b = 42 != 422; (ist true weil ungleich)

var x = (42 == 42) ? 42: 1337; Wenn 42 gleich 42 true ist, schreibe 42 in var x, wenn false schreibe 1337 in x.

If-Abfragen:

if(a < 1337) {window.alert(„huhu“)}	geschwungene Klammer wird nur ausgeführt wenn Bedingung in Klammer true
else { … }	Klammer hinter else wird ausgeführt wenn Bedingung bei if „false“ ist. (Mehrere if Abfragen möglich mit else if).
Wird die Klammer hinter if wahr, springt JS an das Ende der Funktion über alle anderen if Abfragen und else unbeachtet drüber.
if(a<b \|\| a<c) { .. }	meint „oder“, geschweifte Klammer wird ausgeführt wenn a kleiner b ist ODER a kleiner c ist
if(a==b && a<c) { .. }	meint „und“, geschweifte Klammer wird ausgeführt wenn a gleich b ist UND a kleiner c ist

switch case statements:

switch(new Date().getDay()) {

case 0:

window.alert(„Heute ist Sonntag“) … };

break;

case1:

(...)

newDate().getDay() erzeugt ein Array aus den Wochentagen, wobei Sonntag an der ersten Stelle steht, also auf 0.

Wenn tatsächlich Sonntag ist, gibt der switch den Alert aus „Heute ist Sonntag“ und bricht durch break; seine Suche ab. Es geht am Ende nach } weiter im Code.

default kann am Ende stehen falls kein Wert gefunden wird.

Funktionen: Eine Funktion ist ein Code-Block, der eine bestimmte Aufgabe ausführt. Funktionen werden aufgerufen mit ihrem Namen und (), evtl. mit Parametern/Variablen in der Klammer, die der Funktion übergeben werden und mit denen sie ausgeführt wird. Ein Aufruf ganz ohne Klammer ruft die Definition der Funktion auf, führt sie aber nicht aus. Es gibt vordefinierte Funktionen (bspw. window.alert()) in JS, man kann aber auch selbst eine schreiben:

function reusableFunction() {

console.log("Hi World");

}

reusableFunction();

„Hi World“ wird in der Console ausgegeben, die letzte Zeile ruft die Funktion auf (invoke oder call genannt). Dieser call kann beliebig oft benutzt werden im Programm

function func1(a, b) {

console.log(a +b);

}

func1(5, 2);

gibt 7 in der console aus.

function timesFive(g) {

return g * 5;

}

...

var answer = timesFive(5);

...

diese Funktion nimmt einen Wert g an, multipliziert ihn mit 5 und gibt den Wert mit return zurück.

Die Letzte Zeile definiert eine Variable „answer“, die das Ergebnis der Funktion mit dem Wert in der Klammer (argument) annimmt, also ist answer 25. Diese Zeile kann überall im Code stehen.

function nextInLine(arr, item) {

arr.push(item);

var item = arr.shift();

return item;

}

Diese Funktion fügt item zu array hinten hinzu, schneidet dann den ersten Wert des arrays arr ab und gibt ihn als item zurück.

function myFunction() {

document.getElementById("demo").innerHTML = "Hello World!";

}

Die Funktion generiert einen String in demo.

Der Button führt bei einem Klick die Funktion aus. Es wird „Hello World“ ausgegeben.

rekursive Funtionen: Eine Funktion wird in ihr selbst wieder aufgerufen. Dies kann komplizierte Berechnungen auf einfache Teile herunterbrechen. Bsp: Berechnung der Fakultät 5! = 5*4*3*2

function fakul(n) {

if (n <= 2) {

return n;

}

return n*fakul(n-1);

}

was passiert?

der Kniff ist die untere Zeile, nämlich dass mit return ein Wert zurück gegeben wird, der berechnet wird mit n mal wieder die Funktion nur mit n-1. Um das zu berechnen führt die Funktion nun wieder die Funktion aus, doch in ihr ist ja wieder die Funtkion mit n-1 enthalten (was INSGESAMT jetzt bereits n-2 ist). Das passiert solange bis n<= 2 ist, denn dafür ist die if-Abfrage in der Funktion drin (das ist die notwendige Halt-Bedingung, sonst würde die Berechnung immer weiter laufen). Wenn n<=2 ist wird n zurückgegeben und somit die Funktion NICHT NOCH EINMAL aufgerufen,da der Rest übersprungen wird. Jetzt können alle Schritte „rückwirkend“ berechnet werden.

Erster button gibt das Datum in einem anderen Element aus.

Zweiter button gibt das Datum in diesem Element aus.

Es kann auch an der Stelle eine Funktion aufgrufen werden: <button onclick=“funktionsname()“>

Mit .indexOf() kann die Position eines bestimmten Textteils in einem String bestimmt werden, mit .match() wird nach Übereinstimmungen gesucht:

var str = "Please locate where 'locate' occurs!";

var pos = str.indexOf("locate");

document.getElementById("demo").innerHTML = pos;

gibt 7 in Element „demo“ aus

var str = "The rain in SPAIN stays mainly in the plain";

var res = str.match(/ain/g);

document.getElementById("demo").innerHTML = res;

gibt aus:

ain,ain,ain

(nicht 4 mal wegen case sensitive!)

var str = document.getElementById("demo").innerHTML;

var txt = str.replace("Microsoft","W3Schools");

document.getElementById("demo").innerHTML = txt;

r.replace tauscht Teile aus

var text = document.getElementById("demo").innerHTML;

document.getElementById("demo").innerHTML = text.toUpperCase();

.toUpperCase stellt alles in Großbuchstaben dar, analog .toLowerCase

var str = "a,b,c,d,e,f";

var arr = str.split(",");

document.getElementById("demo").innerHTML = arr[0];

wandelt einen string in ein array um, Trenner ist das Komma

Eine Funktion mit diesem Inhalt gibt „a“ aus.

x.toPrecision(2); rundet Zahl x auf 2 Nach-Kommastellen

Variablen in Zahlen umwandeln (falls möglich) mit Number(variable); bsp.:Number(true); ist 1 / Number(„10“); ist 10 / Number(„ 10 „); ist 10, aber: Number(„10,33“) oder Number(„John“); ist NaN;

Math:

Math.PI

gibt den Wert von PI aus (3,14159...)

Math.pow(a,b)

a hoch b → Math.pow(8,2); ist 64.

Math.floor(x)

rundet x ab, runter auf den nächstnidrigeren Integer

Math.sin(x)

berechnet den Sinus. Formel ist (Winkel in Grad) * PI / 180

Math.max()

gibt den höchsten Wert in einer Liste an

Math.abs(x)

macht Wert positiv

Math.sqrt(x)

Wurzel von x

Math.round

runden auf nächsten Integer

Math.ceil(x)

rundet x auf den nächshöheren Integer

Math.cos(x)

berechnet cosinus.

Math.min()

gibt den kleinsten Wer in einer Liste an

Math.random()

gibt eine zufällige Zahl zwischen 0 und 1 aus

Bsp: Umrechner von Grac Celsius in Fahrenheit

Eine zufällige Zahl (integer)

von 0 bis 9 ausgeben: Math.floor(Math.random() * 10);

von 0 bis 10: Math.floor(Math.random() * 11);

von 1 bis 10: Math.floor(Math.random() * 10) + 1;

von 0 bis 99: Math.floor(Math.random() * 100);

von 1 bis 100: Math.floor(Math.random() * 100) + 1;

einfacher Würfel 1 – 6 mit button:

<button onclick="document.getElementById('demo').innerHTML = getRndInteger(1,6)">Click Me</button>

function getRndInteger(min, max) {

return Math.floor(Math.random() * (max - min)) + min;

} </script>

Arrays:

var fruits = [„Banana“, „Orange“, „Apple“, „Mango“];	Schreibweise einer Definition einer Variablen, die ein Array beinhaltet
document.getElementById("demo").innerHTML = fruits[0];	wählt aus dem Array das Element an der 1. Stelle aus (zero based indexing, s.o.): Banana
fruits[0] = „Kiwi“;	wechselt das erste Element des Arrays aus → Bannana raus, Kiwi rein (ersetzen)
document.getElementById("demo").innerHTML = fuits.lenght;	gibt die Länge des Arrays aus (hier 4)
document.getElementById("demo").innerHTML = Array.isArray(fruits);	gibt true zurück wenn fruits ein Array ist.
*document.getElementById("demo").innerHTML = fruits.join(" ");**	fügt alle Elemente des Array zu einem string zusammen, Array bleibt erhalten
document.getElementById("demo").innerHTML = fruits.toString();	gibt alle Elemente des Array als string aus, mit Komma getrennt, Array bleibt erhalten
fruits[fruits.length] = "Lemon";	fügt das Element Lemon zum Array hinzu.
fruits.splice(2, 0, "Lemon", "Kiwi"); var citrus = fruits.slice(1,3);	fügt in das Array 2 neue Elemente Lemon und Kiwi ein. 0 Elemente werden entfernt schneidet Elemente aus dem Aray von 1 bis (aber nicht mit) 3 → Bsp.
fruits.unshift("Lemon");	fürgt vorne Lemon ins Array hinzu, kein Element wird gelöscht
fruits.shift();	löscht das erste Element in einem Array
fruits.sort();	ordnet Array alphabetisch (Anfangsbuchstaben)→ .sort UND .reverse sortiert absteigend
fruits.reverse();	dreht die Reihenfolge der Elemente eines Arrays um
points.sort(function(a, b){return a - b});	sortiert Nummern aufsteigend: Funktion subtrahiert wie angegeben immer zwei Variablen miteinander, für alle im Array. Wenn das Ergebnis negativ ist, ist die Zahl zwangsläufig kleiner. So bekommt man die richtige Reihenfolge. Erklärung
document.getElementById("demo").innerHTML = myArrayMin(points);	findet das niedrigste Element im Array, auch mit myArrayMax entsprechend das höchste
myArray.push(["dog", 3]);	push fügt ein Element (hier wieder ein Array) in myArray als letztes Element ein pop entfernt das letzte Element in einem Array shift entfernt erstes Element eines Arrays unshift fügt ein neues Element am Anfang des Arrays ein
Zwei Arrays zu einem zusammenfügen: var myGirls = ["Cecilie", "Lone"]; var myBoys = ["Emil", "Tobias", "Linus"]; var myChildren = myGirls.concat(myBoys); genauso mit mehreren Arrays: var myChildren = arr1.concat(arr2, arr3, arr4);
Nested arrays: var myArray = [[„string“, 4], [„winter“, 5], 8]; myArray[2] = 8

for-Schleife

for (i=0; i < users.length; i++) { }	Was passiert? Zuerst wird die Zählvariable i auf 0 gesetzt. Dann wird bestimmt wie oft die Schleife durchlaufen werden soll (hier solange i kleiner ist als die Länge des Array. Als letztes wird bestimmt wie gezählt wird, hier wird die Zählvariable bei jedem Durchlauf um 1 erhöht.
for (i=users.length - 1; i <=0; i--) { }	beginnt beim letzten Element und zählt rückwärts bis zur ersten Stelle
for (i in users) { }	gleich wie die oberste for–Schleife, umdrehen geht dann über reverse();

while-Schleife: (while (Bedingung) { mache das }) while (i < 10) { window.alert(i); i++; }	do while Schleife do { window.alert(i); i++; } while (i < 0);

break und continue

Events:

In HTML werden in Tags sog. Events eingefügt. Danach sind sog. event handler Attribute erlaubt. Das ist dann Java Script Code:

<element event=“JavaScript“> Es gibt sehr viele Events. Das können Mouse-Events sein, Klick-Events, Keyboard-Events, UI-Events oder bspw das Laden der Seite oder eines Bildes etc. sein. Im Eventhandler setzt man ein on vor das Event und definiert dann in der Klammer mit JavaScript was passieren soll.

Document Object Model (DOM)

Das DOM ist der Standard für wie man HTML Elemente bekommt, verändert, hinzufügt oder löscht.

Eine Seite kann man sich wie ein Baumdiagramm vorstellen. Das Document ist alles, dann folgt die oberste Ebene mit dem <html> -Tag, dann teilt es sich in <head> und <body> Bereich, was die nächste Ebene darstellt, usw.

Alle Objekte auf einer Seite können mit JavaScript angesprochen und somit verändert werden: Text, Attribute, Style können geändert, auf Events reagiert oder auch neue Elemente generiert oder existierende gelöscht werden. Webseiten werden damit DYNAMISCH!

Bsp:

document.getElementbyId(„ID-Name“).innerHTML= „neuer Text“;	verändert das Element mit der ID: ID-Name. Hier wurde das innere HTML, also der Text verändert zu „neuer Text“.
var x = document.getElementsbyTagName(„p“);	speichert alle Absätze p in der Variablen x. Immer als ARRAY gespeichert.
window.alert(x[0].innerHTML);	gibt den Inhalt des ersten Paragraphen in einem Alert-Fenster aus.